<template>
  <div  class="home">

    <div class="home-hero">
      <h1>m-ui</h1>
      <MButton type="primary" @click="router.push('/components')">
        组件列表
      </MButton>
    </div>
    <div class="home-hero home-readme">
        <Readme />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import Readme from '../../../readme.md'
const router = useRouter()

</script>




<style lang="scss" >
.home {

  &-hero {
    padding: 50px 40px;
    text-align: center;
    background-color: #f5f6f8;
    h1 {
      margin: 0 0 36px;
      font-size: 48px;
      font-weight: 600;
      line-height: 56px;
      color: #080e29;
    }

  }
  &-readme {

    .hljs {
      text-align: left!important;
    }
  }


}
</style>
